<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQTouch &beta;</title>
        <style type="text/css" media="screen">@import "../../themes/css/jqtouch.css";</style>
        <script src="../../src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>


        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                preloadImages: [
                    '../../themes/jqt/img/back_button.png',
                    '../../themes/jqt/img/back_button_clicked.png',
                    '../../themes/jqt/img/button_clicked.png',
                    '../../themes/jqt/img/grayButton.png',
                    '../../themes/jqt/img/whiteButton.png',
                    '../../themes/jqt/img/loading.gif'
                    ]
            });

            $(function(){
                jQT.addAnimation({
                    name: 'reveal',
                    selector: '.revealme'
                });
            });
        </script>
        <style type="text/css" media="screen">
            div#jqt .reveal.in {
            	-webkit-animation-name: dontmove;
            	z-index: 0;
            }

            div#jqt .reveal.out {
            	-webkit-animation-name: revealout;
            	z-index: 10;
            }

            div#jqt .reveal.out.reverse {
            	z-index: 0;
            	-webkit-animation-name: dontmove;
            }

            div#jqt .reveal.in.reverse {
            	z-index: 10;
            	-webkit-animation-name: revealin;
            }


            @-webkit-keyframes revealin {
                from { -webkit-transform: translateX(100%); }
                to { -webkit-transform: translateX(0); }
            }

            @-webkit-keyframes revealout {
                from { -webkit-transform: translateX(0); }
                to { -webkit-transform: translateX(100%); }
            }
        </style>
    </head>
    <body>
        <div id="jqt">
            <div id="test">
                <ul class="rounded">
                    <li><a class="revealme" href="#page2">Test Reveal</a></li>
                </ul>
            </div>
            <div id="page2">
                <div style="font-size: 1.5em; text-align: center; margin: 160px 0 160px; font-family: Marker felt;">
                    Pretty smooth, eh?            
                </div>
                <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton goback">Go back</a>
            </div>
        </div>
    </body>
</html>